<template>
  <div class="form-setting-panel">
    <h3 class="form-setting-panel-title">{{ field.displayName }}</h3>

    <p class="form-design-warning">
      {{$t('product.materialsBillSetting.defaultTip')}}
    </p>

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 显示字段 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('product.materialsBillSetting.showFieldTitle')}}</h4>
      <div class="form-item-box">
        <el-select
          v-model="materialFieldValue"
          value-key="fieldName"
          multiple
          class="material-select"
        >
          <el-option
            v-for="item in materialFieldOptions"
            :key="item.fieldName"
            :label="item.displayName"
            :value="item"
            :disabled="checkFieldDisabledHandler(item)"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- end 显示字段 -->
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
/* props */
import { settingProps } from '@src/component/form/components/props';

// util
import { findComponentUpward } from '@src/util/assist';
import * as FormUtil from '@src/component/form/util';

export default {
  name: 'form-materials-bill-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {};
  },
  computed: {
    /** 子表单字段 */
    subformFields() {
      return this.field?.subFormFieldList || [];
    },
    materialFieldValue: {
      get() {
        return this.subformFields;
      },
      set(value) {
        this.update(value, 'subFormFieldList');
      },
    },
    materialFieldOptions() {
      let { materialFiels } = findComponentUpward(this, 'form-design') || {};

      return FormUtil.toFormField(materialFiels);
    },
  },
  mounted() {
    this.materialFieldValue = this.initRelationFiels();
  },
  methods: {
    // 初始化关联显示字段
    initRelationFiels() {
      // 无值时设置默认值
      if (!this.materialFieldValue.length) {
        let fields = this.materialFieldOptions.filter(field =>
          this.checkFieldDisabledHandler(field)
        );
        return fields;
      }

      // 有值时需过滤掉已被删除的关联显示字段
      let materialFieldValue = this.materialFieldValue.filter(item => {
        let index = this.materialFieldOptions.findIndex(
          field => item.fieldName === field.fieldName
        );
        return index > -1;
      });

      // 已删除的关联显示字段
      let removeFields = this.materialFieldValue.filter(field =>
        this.materialFieldOptions.every(
          option => option.fieldName != field.fieldName
        )
      );

      // 存在已删除的关联显示字段则提示
      if (removeFields.length) this.showNotification(removeFields);

      return materialFieldValue;
    },
    // 物料编号, 物料名称默认选中，禁止点击
    checkFieldDisabledHandler(field) {
      const fieldNameArr = ['sn', 'name'];
      let fieldName = field.fieldName;

      return fieldNameArr.includes(fieldName);
    },
    showNotification(arr = []) {
      this.$notify({
        type: 'warning',
        title: this.$t('common.form.preview.material.label3'),
        duration: 0,
        message: (function (h) {
          let fieldNodes = arr.map((item, index) => {
            return (
              <strong>
                {item.displayName}
                {arr.length - 1 != index && '、'}
              </strong>
            );
          });

          return (
            <div class="form-design-notification">
              <p>{this.$t('product.materialsBillSetting.notification1')}：</p>
              <div class="form-design-notification-content">{fieldNodes}</div>
            </div>
          );
        })(this.$createElement),
      });
    },

    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
  },
};
</script>
<style lang="scss" scoped>
.material-select {
  width: 100%;
  margin-top: 10px;
  ::v-deep .el-tag:nth-child(1),
  ::v-deep .el-tag:nth-child(2) {
    .el-tag__close {
      display: none;
    }
  }
}
</style>
